<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/page4.css">
		<title></title>
	</head>
	<body>
		<div id="page4">
			<img src="../images/p4-1.jpg" class='img1'/>
			<img src="../images/p4-2.jpg" class='img2'/>
			<img src="../images/p4-3.png" class='img3'/>
			<img src="../images/p4-4.png" class='img4'/>
			<img src="../images/p4-5.png" class='img5'/>
			<img src="../images/p4-6.png" class='img6'/>
			<img src="../images/p4-7.png" class='img7'/>
			<input type="text" id="ipt1" value="" placeholder="输入姓名"/>
			<input type="text" id="ipt2" value="" placeholder="选择职业"/>
			<ul class="list">				
				<li>上班族</li>
				<li>学生</li>
			</ul>
		    <span><img src="../images/p4-13.png" class='img13'/></span>
		</div>
		<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('.img3').animate({
				left:'0.34rem',				
			},1000);
			$('.img4').delay(500).animate({
				right:'0.44rem',				
			},1000);
			$('.img5').delay(500).animate({
				top:'0.78rem'				
			},1000);
			$('.img7').delay(1000).animate({
				opacity:'1'				
			},1000);
			$('#ipt1').delay(1500).animate({
				opacity:'1'				
			},1000);
			$('#ipt2').delay(1500).animate({
				opacity:'1'				
			},1000);
			$('.img13').delay(1500).animate({
				opacity:'1'				
			},1000);

			$('#ipt2').on('click',function(){
				$(".list").css({display:'block'})
			});
//			console.log($('li'))
			$('li').on('click',function(){
				console.log($(this).html())
				$('#ipt2').val($(this).text());
				$(".list").css({display:'none'})
			})
			
            $('span').on('click',function(){
            	Cookie.setCookie('token1',$('#ipt1').val(),30)
            	Cookie.setCookie('token2',$('#ipt2').val(),30)
            	location.href='page4-2.html';
            	
            })
		</script>
	</body>
</html>
